<template>
  <div class="home">
    <van-search v-model="value" @click="onFocus" placeholder="请输入搜索关键词" />
    <van-popup
      v-model="$store.state.popShow"
      position="right"
      :style="{ height: '100vh',width:'90vw' }"
    >
      <sub-popup></sub-popup>
    </van-popup>
    <swiper :swiper="swiper" :auto="3000"></swiper>
    <grid :channel="channel"></grid>
    <brand :brandList="brandList"></brand>
    <product :goodsList="newGoodsList">
      <div class="title">
        <h3>周一周四 · 新品首发</h3>
      </div>
    </product>
    <recommend :hotGoodsList="hotGoodsList"></recommend>
    <topic :topicList="topicList"></topic>
    <div class="brandHome" v-for="item in categoryList" :key="item.id">
      <div class="brand_title">{{item.name}}</div>
      <product :goodsList="item.goodsList"></product>
    </div>
    <div class="broke"></div>
  </div>
</template>

<script>
import SubPopup from "@/components/SubPopup/SubPopup";
import Swiper from "@/components/swiper/swiper";
import Grid from "@/components/Grid/Grid";
import Brand from "@/components/Home/Brand";
import Recommend from "@/components/Home/Recommend";
import Topic from "@/components/Home/Topic";
import Product from "@/components/Home/Product";
import { getHomeData } from "@/request/api";
export default {
  name: "Home",
  data() {
    return {
      value: "",
      swiper: [],
      channel: [],
      brandList: [],
      hotGoodsList: [],
      newGoodsList: [],
      topicList: [],
      categoryList: []
    };
  },
  components: {
    SubPopup,
    Swiper,
    Grid,
    Brand,
    Recommend,
    Topic,
    Product
  },
  created() {
    getHomeData().then(res => {
      //判断是否被拦截
      if (res.errno == "0") {
        this.swiper = res.data.banner;
        this.channel = res.data.channel;
        this.brandList = res.data.brandList;
        this.newGoodsList = res.data.newGoodsList;
        this.hotGoodsList = res.data.hotGoodsList;
        this.topicList = res.data.topicList;
        this.categoryList = res.data.categoryList;
      }
    });
  },

  methods: {
    onFocus() {
      this.$store.commit("changePopShow", true);
    }
  }
};
</script>

<style lang="less" scoped>
.brandHome {
  border-top: 10px solid #f4f4f4;
}
.broke {
  height: 60px;
}
.brand_title {
  margin-top: 20px;
  text-align: center;
}
</style>
